<template>
  <div class="detail_content">
    <p class="title">| 基本信息</p>
    <el-row class="base_info">
        <el-col :span='3'><span>交易时间:</span></el-col>
        <el-col :span='9'><p>{{detail.created_at}}</p></el-col>
        <el-col :span='3'><span>交易类型:</span></el-col>
        <el-col :span='9'>
           <p v-if="detail.type == 1">订单入账 {{detail.order_id}}</p>
          <p v-if="detail.type == 5">拼团退还 {{detail.order_id}}</p>
        </el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>订单类型:</span></el-col>
        <el-col :span='9'>
            <p v-if='order_info.order_type==1'>爆品商品</p>
             <p v-if='order_info.order_type==5'>现金券</p>
             <p v-if='order_info.order_type==10'>拼团</p>
             <p v-if='order_info.order_type==15'>会员专享商品</p>
             <p v-if='order_info.order_type==20'>优惠买单</p>
                <p v-if='order_info.order_type==25'>普通商品</p>
             <p v-if='order_info.order_type==30'>会员充值</p>
        </el-col>
        <el-col :span='3'><span>所属小店:</span></el-col>
        <el-col :span='9'><p>{{detail.shop_name}}</p></el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>支付单号:</span></el-col>
        <el-col :span='9'>
          <p v-if='order_info.out_order_no > 0'>{{order_info.out_order_no}}</p>
          <p v-else>---</p>
        </el-col>
        <el-col :span='3'><span>收支流水号:</span></el-col>
        <el-col :span='9'><p>{{order_info.order_no}}</p></el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>流水金额:</span></el-col>
        <el-col :span='9'>
           <p v-if='order_info.actual_amount > 0'> + ¥ {{order_info.actual_amount}}</p>
           <p v-if='order_info.actual_amount < 0'> - ¥ {{order_info.actual_amount}}</p>
           <p v-if='order_info.actual_amount == 0'>  ¥ {{order_info.actual_amount}}</p>
           <p v-show="!order_info.actual_amount">---</p>
        </el-col>
        <el-col :span='3'><span>支付渠道:</span></el-col>
        <el-col :span='9'>
          <p v-if='order_info.pay_method ==1'>微信支付</p>
          <p v-if='order_info.pay_method ==5'>支付宝支付</p>
        </el-col>
    </el-row>
     <el-row class="base_info">
        <el-col :span='3'><span>结算状态:</span></el-col>
        <el-col :span='9'>
           <p v-if='detail.status == 1'>未结算</p>
            <p v-if='detail.status == 5'>已结算</p>
            <p v-if='detail.status == 10'>已失效</p>
        </el-col>
    </el-row>

    <p class="title">| 订单信息</p>
    <div class="order_infomation">
         <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="商品ID" prop="product_id"></el-table-column>
      <el-table-column label="商品名称" prop='title'></el-table-column>
      <el-table-column label="购买数量" prop='quantity'></el-table-column>
      <el-table-column label="订单金额" prop='total_amount'></el-table-column>
      <el-table-column label="实付金额" prop='actual_amount'></el-table-column>
    </el-table>
    </div>

    <div class="class_btn">
       <el-button size ='mini' type="primary" @click="handleCancel">确定</el-button>
       <el-button size ='mini' type="danager" @click="handleCancel">取消</el-button>
    </div>

  </div>
</template>

<script>
// import {shopTransactionDetail} from '@/api/finance'
export default {
    name: 'record_detail',
  props: [ 'visible', 'currentId'],
   data () {
    return {
      detail: {},
      order_info:{},
      tableData:[],
    }
  },
  watch: {
    visible (newValue) {
      if(newValue){
        console.log('显示值改变')
        this.getRecordDetailData()
      }
    }
  },
  methods:{
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    handleCancel() {
          this.$emit('func')
    },
    async getRecordDetailData(){
      let res = await  shopTransactionDetail({id:this.currentId});
      if(res.code === 10000){

        this.detail = res.data
        this.order_info = res.data.order_info
        this.tableData = []
        if(this.detail.order_info){
          this.tableData.push(this.detail.order_info)
        }

      }else{
        this.$message.error(res.message)
      }

    }
  }
};
</script>


<style scoped lang="scss">
 .detail_content{
     padding: 20px;
     .title{
         font-size: 16px;
     }

     .base_info{
         margin:15px 20px 20px;
         span{
             font-size:12px;
             color: #999999;
         }

         p{
             font-size: 13px;
             color: #333333;
         }
     }
     .order_infomation{
       margin-top: 16px;
     }

     .class_btn{
       margin-top: 30px;
       text-align: center;
     }
 }
</style>

